forum

home / developersection / forums / how to make heart in css?

Ask Question
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Follow
Can you answer this question?
Answer

2 Answers

Aryan Kumar

Aryan Kumar

10-Jun-2023

To make a heart in CSS, you can use the following steps:

  1. Create a div element and set its width and height to 50px.
  2. Set the div element's background color to red.
  3. Use the ::before and ::after pseudo-elements to create two curves. The ::before pseudo-element should be rotated 45 degrees and the ::after pseudo-element should be rotated -45 degrees.
  4. Set the ::before and ::after pseudo-elements' width and height to 25px.
  5. Set the ::before and ::after pseudo-elements' border-radius to 50%.

Here is an example of the CSS code for a heart:

Code snippet

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: rotate(45deg);
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  transform: rotate(-45deg);
}

This code will create a heart that is 50px wide and 50px high. The heart will be red with two curves that meet in the middle.

You can adjust the width and height of the heart, as well as the color of the background, to suit your needs. You can also use the ::before and ::after pseudo-elements to create other shapes, such as stars, flowers, and animals.

Ravi Vishwakarma

Ravi Vishwakarma

15-Jul-2021

Heart Shape

How to make heart in CSS?

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

         .heart {

            width:100px;

            height:60px;

            position:relative;

            display:block;

            background-color:red;

            transform:rotate(45deg);

            border-radius:50px 0px 0px 50px ;

        }

            .heart::after {

               width:100px;

            height:60px;

            position:absolute;

            display:block;

            content:'';

            background-color:red;

            transform:rotate(90deg);

            left:20px;

            top:-20px;

            border-radius:50px 0px 0px 50px ;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='heart'>  </div> Heart Shape <br />

</body>

</html>


MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy